<template>
    <div style="height: 100vh; overflow: auto">
<!--      <h2 style="text-align: center; padding-top: 16px">关于</h2>-->
      <div class="about-container">
        <h3 style="font-weight: lighter">这是一个Mac版的桌面壁纸管理工具</h3>
        <h4 style="margin-top: 10px; font-weight: lighter">当前素材来源于bing.com官网</h4>
        <h5 style="margin-top: 10px; font-weight: lighter">使用反馈: jiang_an_lin_dev@qq.com</h5>
        <h5 style="margin-top: 10px; font-weight: lighter">当前版本: {{appVersion}}</h5>
      </div>
      <div style="text-align: center; margin-top: 30px; font-weight: lighter; font-size: 13px; line-height: 30px;">
        <div>若果对您有所帮助,欢迎打赏一杯咖啡<span style="font-size: 26px">☕</span>️</div>
        <div>以支持开发人员写出更多优质应用</div>
        <img :src="payImg" alt=""
             style="display: inline-block; width: 280px; border: 0px solid darkgrey;border-radius: 4px;margin-top: 8px">
      </div>
      <div class="copy-right" ref="copyRightRef">
        <div>黔ICP备2021002127号</div>
        <div style="margin-top: 4px; font-size: 8px"> © {{year}}
          <span style="padding-left: 8px"></span>
          DiManager
          <span style="padding-left: 8px"></span>{{siteHost}}</div>
      </div>
    </div>
</template>

<script>
import {SiteHost} from '../utils/AppConstant'

export default {
  name: 'About',
  data () {
    return {
      year: (new Date()).getFullYear(),
      payImg: require('../assets/coffee/pay.jpg')
    }
  },
  computed: {
    appVersion: function () {
      return process.env.VUE_APP_VERSION
    },
    siteHost: function () {
      return SiteHost.replace('//', '').split(':')[1]
    }
  },
  created () {
  },
  mounted () {
    const timerId = setTimeout(() => {
      clearTimeout(timerId)
      this.$refs.copyRightRef.style.display = 'block'
    }, 1000)
  },
  methods: {
    doSomething () {
      ''.localeCompare()
    }
  }
}
</script>

<style scoped>
  .about-container {
    text-align: center;
    padding-top: 60px;
    font-weight: lighter;
  }
  .copy-right {
    margin-top: 30px;
    /*position: absolute;*/
    /*bottom: 16px;*/
    font-size: 10px;
    color: darkgrey;
    text-align: center;
    /*right: 16px;*/
    /*left: 16px;*/
    display: none;
    margin-bottom: 60px;
  }
</style>
